<!--
 * @Description: 缺陷单位信息下钻
 * @Author: zhangweili
 * @Date: 2021-04-13 16:00:44
 * @LastEditTime: 2023-05-16 18:15:16
 * @LastEditors: zhangweili zhang_weili@uxsino.com
-->
<template>
  <div class="app-container v-flex JCWWTKInformation">
    <!-- 顶部操作栏 -->
    <filter-form
      :form="listQuery"
      :data="filterData"
      :has-default-operation="false"
      @search="search">
      <el-button
        style="width: 99px;"
        class="search-btn"
        size="mini"
        type="primary"
        icon="el-icon-search"
        @click="search">查询</el-button>
      <el-button
        style="width: 99px;"
        class="refresh-btn"
        size="mini"
        type="primary"
        icon="el-icon-refresh"
        @click="resetSearch">重置</el-button>
    </filter-form>

    <!-- 顶部操作栏 -->


    <!-- 表格 -->
    <div ref="main" class="v-flex-elastic defect-information">
      <div style="width:100%;height:100%;" class="moduleDialog2">
        <div class="row1">
          <div class="column1">
            <Model1 ref="Model1" :dept-code="deptCode" :rail-types="railTypes" />
          </div>
          <div class="column1">
            <Model2 ref="Model2" :rail-types="railTypes" :dept-code="deptCode" />
          </div>
        </div>
        <div class="row2">
          <Model3 ref="Model3" :rail-types="railTypes" :dept-code="deptCode" />
        </div>
      </div>
    </div>
    <!-- 表格 -->


  </div>
</template>

<script>
  import { defectUnitDistribute } from '@/api/cms/index/index.js'
  import Model1 from './components/model1.vue'
  import Model2 from './components/model2.vue'
  import Model3 from './components/model3.vue'
  export default {
    name: 'JCWWTKInformation',
    components: {
      Model1,
      Model2,
      Model3
    },
    data() {
      return {
        deptCode:'',
        // 顶部操作栏配置
        filterData: {
        deptCode: {
          width: '160px',
          key: 'deptCode',
          type: 'select',
          title: '单位',
          placeholder: '所有单位',
          options: [],
          clearable: true,
          props: { label: 'deptName', value: 'deptCode' },
          changeFn: (vm) => {
            if (vm) {
              this.deptCode = vm
              this.listQuery = {
                deptCode: vm,
              }
              this.search() // 加载下拉信息列表
            }
          }
        }
       },
        railTypes: 'GT,PT',
        // 查询列表请求参数
        listQuery: {
          deptCode:  ''
        }
      }
    },
    activated() {
      // 获取当前登入人可以管理的部门所属单位列表
    },
    mounted() {
      this.init()
    },
    methods: {
      init(){

        defectUnitDistribute({ railTypes: this.railTypes }).then((res) => {
          var resData = res.data
         // 通过单位标识确定接口，连接各段的数据库
        if (resData.length !== 0) {
          this.filterData['deptCode'].options = res.data
          this.deptCode = res.data[0].deptCode
          this.listQuery.deptCode = res.data[0].deptCode
        }
        })
      },

      // 搜索
      search() {
        this.listQuery.deptCode=this.deptCode
      },
      resetSearch() { // 重置
        this.listQuery = {
          deptCode:  ''
        }
        this.init() // 获取当前登入人可以管理的部门所属单位列表
      }
    }
  }
</script>

<style lang="scss" scope>
  .JCWWTKInformation {
    .refresh-btn {
      background-color: #3dbed5;
      border: none;
    }
    .refresh-btn:hover {
      background-color: #73cddd;
      border: none;
    }
    .content {
      position: relative;
      background-color: #ffffff;
      padding: 20px 30px;

    }
  }
  .moduleDialog2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .row1 {
    width: 100%;
    height: 56%;
    display: flex;
    justify-content: space-between;
  }
  .row2 {
    width: 100%;
    height: 42%;
    background: #0f1f56;
  }
  .column1 {
    width: 49.5%;
    height: 100%;
    background: #0f1f56;
  }
</style>
